<template>
  <section class="home">
    <div class="home-page">
      <header>
        <p class="title">GreedZone</p>
        <gz-menu></gz-menu>
      </header>
      <transition :name="transitionName">
        <router-view class="route-view"></router-view>
      </transition>
    </div>
    <rainy-img></rainy-img>
  </section>
</template>

<script>
import GzMenu from '@/components/gzMenu'
export default {
  components: {
    GzMenu,
    RainyImg: () => import('./children/rainyImg')
  },
  computed: {
    transitionName () {
      return this.$store.getters.transitionName || 'slide-right'
    }
  }
}
</script>

<style scoped lang="scss">
.home {
  &-page {
    width: 100%;
    height: 100%;
    position: absolute;
    z-index: 1;
  }
  header {
    background-color: rgba(0, 0, 0, 0.1);
    .title {
      font-weight: bold;
      font-size: 2rem;
      line-height: 3rem;
    }
  }
  &-nav {
    display: flex;
    justify-content: center;
  }
}
</style>

